<template>
	<view class="container">
		<view class="top">
			<view v-for="(item,index) in status_arr"
				:class="item.index==postData.status?'tap-item xuanzhong':'tap-item'" :key="index" @click="selectType(item.index)">
				{{item.title}}
			</view>
		</view>
		<view style="width: 750rpx;height: 130rpx;"></view>
		<!-- 商品详情 - start -->
		<view v-for="(info,index) in list" class="item" :key='info.customerPickupNo'>
			<view class="item-top">
				<view class="top-status">提货商品</view>
				<view v-if="info.status === 1" class="top-status-button-ok">已确认</view>
				<view v-else-if="info.status === 10" class="top-status-button">未收到</view>
				<view v-else>
					<view v-if="!info.integral && !info.redMoney" class="top-status-button">待确认</view>
					<view v-else class="top-status-button-reward">
						<image src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/pickup/reward.gif"
							mode=""></image>
						确认提货有奖励
					</view>
				</view>
			</view>
			<view class="goods" v-for="item in info.confirmGoodsList" :key="item.goodsNo">
				<view class="goods-content">
					<image class="goods-img" :src="item.goodsImg"></image>
					<view class="goods-info">
						<view class="goods-title-box">
							<view class="goods-title">{{item.goodsName}}</view>
						</view>
						<view class="goods-pick-num-box">
							<view class="goods-price-title">本次取货数量：</view>
							<view class="goods-price-price">{{item.pickupNumber}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-z-price">
				<view class="goods-price-title">提货时间：</view>
				<view class="goods-price-price">{{info.createTime}}</view>
			</view>
			<view class="goods-z-price">
				<view class="goods-price-title">提货单号：</view>
				<view class="goods-price-price-2">{{info.customerPickupNo}}</view>
			</view>
			<reward-tip v-if="!!info.integral || !!info.redMoney" :integral='info.integral' :redMoney="info.redMoney"></reward-tip>
			<view v-if="info.status === 0" class="goods-pickup">
				<view v-if="info.pickupType == 10" @click="closeOrder(info,index)" class="pickup-button-no">未收到货品</view>
				<view @click="submitOrder(info,index)" class="pickup-button">已收到货品</view>
			</view>
		</view>
		<view v-if="list.length <= 0">
			<view class="n-center-box">
				<image src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/empty.png"></image>
				<view class="n-title">暂无数据！</view>
			</view>
		</view>
		<view style="width: 750rpx;height: 30rpx;"></view>
	</view>
</template>

<script>
	import RewardTip from './components/reward-tip.vue'
	export default {
		components: {
			RewardTip
		},
		data() {
			return {
				status_arr: [{
						title: '全部',
						index: -1
					},
					{
						title: '待确认',
						index: 0
					},
					{
						title: '已确认',
						index: 1
					},
				],
				status_index: 1,
				needInvestigate: false, // 判断是否有未答的调研问卷
				postData: {
					page: 1,
					pageSize: 10,
					status: -1,
				},
				list: [], // 数据列表
				all_count: 0
			}
		},
		onLoad(option) {
			if (option.index) {
				this.postData.status = option.index
			}
			this.getList()
			this.authQuestion()
		},
		methods: {
			// tap切换
			selectType(index) {
				this.list = []
				this.postData.status = index
				this.postData.page = 1
				this.getList()
			},
			// 获取列表
			getList() {
				let that = this
				this.$javaApiErp.doRequest("post", '/rkkt/pickuplog/getList', this.postData, 'json').then(res => {
					if (res.data.code === 0) {
						that.list = that.list.concat(res.data.data.list)
						that.all_count = res.data.data.total
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 5000
						})
					}
				})
			},
			// 提交数据
			submitOrder(info, index) {
				let that = this
				let postData = {
					"pickupNo": info.customerPickupNo
				}
				that.$javaApiErp.doRequest("post", "/rkkt/pickuplog/customerPickupConfirm?pickupNo=" + info
					.customerPickupNo, postData, 'json').then(res => {
					if (res.data.code == 0) {

						if (!!info.integral || !!info.redMoney) {
							that.list[index].status = 1
							uni.showModal({
								title: "提示",
								content: "确认提货成功，奖励将会在 24 小时内到账，请注意查收。",
								showCancel: false,
								confirmText: '知道了',
								success: e => {
									if (e.confirm) {
										// 判断是否需要跳转到问卷
										if (this.needInvestigate === true) {
											uni.navigateTo({
												url: '/pages/newAnswer/questionnaire',
											})
										}
									}
								}
							})
						} else {
							uni.showToast({
								title: '确认提货成功',
								icon: "none",
								duration: 5000
							})
							that.list[index].status = 1
							// 判断是否需要跳转到问卷
							if (this.needInvestigate === true) {
								uni.navigateTo({
									url: '/pages/newAnswer/questionnaire',
								})
							}
						}

					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 5000
						})
					}
				})
			},
			// 点击未收到货品
			closeOrder(info, index) {
				let that = this
				let postData = {
					"pickupNo": info.customerPickupNo
				}
				that.$javaApiErp.doRequest("post", "/rkkt/pickuplog/customerPickupUnReceive?pickupNo=" + info
					.customerPickupNo, postData, 'json').then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '操作成功',
							icon: "none",
							duration: 5000
						})
						that.list[index].status = 10
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 5000
						})
					}
				})
			},
			// 验证是否需要答题
			authQuestion() {
				var _this = this;
				var data = {};
				_this.$NoteApi.doRequest("post", "investigate/needInvestigate", data).then(res => {
					if (res.data.code == 0) {
						if (res.data.data === 1) {
							_this.needInvestigate = true
						}
						if (res.data.data !== null) {
							_this.needInvestigate = true
						}
					}
				})
			},
			// 跳转到订单成功页面
			toPickup(info) {
				uni.navigateTo({
					url: '/pages/pickup/index?pickupNo=' + info.customerPickupNo,
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #F1F1F1;
		width: 750rpx;
		min-height: 100vh;
	}

	.top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 98rpx;
		background-color: #fff;
		margin-bottom: 24rpx;
		display: flex;
		justify-content: space-around;
		font-size: 34rpx;
		z-index: 10;
	}

	.top .tap-item {
		height: 100%;
		line-height: 98rpx;
		text-align: center;
		color: #333;
		font-size: 400;
		border-bottom: 4rpx solid #fff;
		box-sizing: border-box;
	}

	.xuanzhong {
		border-bottom: 4rpx solid #5CAE77 !important;
		color: #5CAE77 !important;
	}

	/* 商品 */
	.top-status-button {
		color: #F59A23;
		font-size: 34rpx;
		font-weight: 500;
		text-align: center;
		width: 128rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #FFEBD1;
		border-radius: 12rpx;
	}

	.top-status-button-ok {
		color: #28B57F;
		font-size: 34rpx;
		font-weight: 500;
		text-align: center;
		width: 128rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #DFFFED;
		border-radius: 12rpx;
	}

	.top-status-button-reward {
		width: 321rpx;
		height: 50rpx;
		background: #FFD0C0;
		border-radius: 8rpx;
		position: relative;
		padding: 0 12rpx;
		box-sizing: border-box;
		text-align: right;
		line-height: 50rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #F33F02;
		font-style: normal;

		image {
			width: 84rpx;
			height: 84rpx;
			position: absolute;
			left: 0;
			top: -30rpx;
		}
	}

	.item {
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding-bottom: 40rpx;
		margin: 0 30rpx 30rpx 30rpx;
	}

	.item-top {
		color: #666666;
		font-size: 36rpx;
		line-height: 50rpx;
		border-bottom: 2rpx solid #F1F1F1;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods {
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid #F1F1F1;
	}

	.goods-content {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding-top: 30rpx;
	}

	.goods-content .goods-img {
		width: 160rpx;
		height: 160rpx;
		background: #D8D8D8;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.goods-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}

	.goods-pick-num-box {
		display: flex;
		justify-content: flex-end;
	}

	.goods-title-box {}

	.goods-title {
		font-size: 38rpx;
		color: #333333;
		font-weight: 400;
		line-height: 53rpx;
		overflow: hidden;
		max-width: 460rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;
		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
	}

	.goods-info .goods-price {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods-danwei {
		font-size: 34rpx;
		color: #888888;
	}

	.goods-price-value {
		font-size: 34rpx;
		color: #333333;
	}

	.goods-num {
		text-align: end;
		font-size: 34rpx;
		color: #888888;
		padding-top: 20rpx;
	}

	.goods-z-price {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 40rpx;
	}

	.goods-price-title {
		font-size: 36rpx;
		color: #666666;
		line-height: 50rpx;
	}

	.goods-price-price {
		font-weight: 400;
		font-size: 40rpx;
		color: #333333;
		line-height: 50rpx;
	}

	.goods-price-price-2 {
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		line-height: 50rpx;
	}

	.goods-pickup {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 30rpx;
	}

	.pickup-button {
		width: 280rpx;
		color: #ffffff;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 36rpx;
		background-color: #5CAE77;
		border-radius: 14rpx;
	}

	.pickup-button-no {
		width: 280rpx;
		color: #ffffff;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 36rpx;
		background-color: #ff5500;
		border-radius: 14rpx;
	}

	.n-center-box {
		position: fixed;
		top: 0;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 364rpx;
	}

	.n-center-box image {
		width: 400rpx;
		height: 400rpx;
	}

	.n-title {
		width: 750rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 30rpx;
	}
</style>